/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { Component } from "react";
import { connect } from "dva";
import { Row, Col, Icon } from "antd";
import PageHeaderLayout from "@/layouts/PageHeaderLayout";
import HelpAndService from "@/components/HelpAndService";
import PopoverInfo from "@/components/PopoverInfo";
import TodoWrap from "./components/TodoWrap";
import HeaderContent from "./components/HeaderContent";
import EchartsWrap from "./components/EchartsContainer/index";
import styles from "../commen.less";

@connect(({ orderWorkTop }) => ({ workTopData: orderWorkTop.workTopInfo }))
class Index extends Component {
  state = {
    countDown: 59,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: "orderWorkTop/getOrderWorkTopInfo" });
    this.timer = setInterval(() => {
      this.setState(prevState => {
        return {
          countDown: prevState.countDown - 1,
        };
      });
    }, 1000);
  }

  componentDidUpdate(prevProps, prevState) {
    const { dispatch } = this.props;
    const { countDown } = this.state;
    const { countDown: prevCountDown } = prevState;
    if (countDown == 0 && prevCountDown != 0) {
      dispatch({ type: "orderWorkTop/getOrderWorkTopInfo" }).then(() => {
        this.setState({
          countDown: 59,
        });
      });
    }
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    const { workTopData } = this.props;
    const { countDown } = this.state;
    return (
      <PageHeaderLayout
        content={<HeaderContent data={workTopData} />}
        title={
          <Row type="flex" justify="space-between">
            <Col>
              实时订单数据
              <PopoverInfo placement="bottomLeft">
                <p>
                  <strong>来源1：</strong>
                  您管理平台旗下业务员及驿站创建的订单
                </p>
                <p>
                  <strong>来源2：</strong>
                  寄件客户从微快递、微掌柜、快宝驿站、微快递小邮筒、您定制公众号/小程序相关下单平台创建给您旗下业务员及驿站的订单。
                  <a href=" https://www.kuaidihelp.com/productintro/product" target="_blank">
                    产品介绍
                  </a>
                </p>
                <p>
                  <strong>今日订单量：</strong>
                  今日业务员/驿站/客户创建的订单数量
                </p>
                <p>
                  <strong>今日取消量：</strong>
                  今日业务员/驿站/客户取消订单数量
                </p>
                <p>
                  <strong>今日完成订单：</strong>
                  今日业务员/驿站/客户创建订单已获取单号的数量
                </p>
                <p>
                  <strong>今日线上运费：</strong>
                  今日业务员/驿站/客户创建订单线上收运费金额总计
                </p>
                <p>
                  <strong>今日线上运费支付笔数：</strong>
                  今日业务员/驿站/客户创建订单线上收运费笔数总计
                </p>
              </PopoverInfo>
            </Col>
            <Col>
              <Row type="flex" gutter={[10, 0]}>
                <Col>
                  <HelpAndService />
                </Col>
                <Col>
                  数据刷新倒计时
                  {countDown == 0 ? (
                    <Icon type="redo" spin />
                  ) : (
                    <span style={{ marginLeft: 10 }}>{countDown}</span>
                  )}
                </Col>
              </Row>
            </Col>
          </Row>
        }
      >
        <div className={styles.main}>
          <TodoWrap data={workTopData} />
          <EchartsWrap />
        </div>
      </PageHeaderLayout>
    );
  }
}

export default Index;
